<template>
    <div>
        <!--Recharge top  begin-->
        <!-- <div class="announcement-top-layout">
            <HeaderNav></HeaderNav>
        </div> -->
        <!--Recharge top  end-->

        <!-- Recharge view begin-->
        <div class="recharge-layout">
            <div class="main-b">
                <!-- Recharge-title begin -->
                <div class="recharge-title">
                    <h3>请认真填写充值信息</h3>
                    <p>
                        为避免错误操作导致您的损失，请您认真填写充值信息！如遇到问题请联系客服：
                        <a>
                            点击此处
                            <label class="recharge-tip">
                                <label> <img src="../assets/img/pay/Pay-QR.png"></label>
                                <span>APP充值更便捷哦</span>
                            </label>
                        </a>
                    </p>
                </div>
                <!-- Recharge-title end -->

                <!-- Pay-user begin -->
                <div class="Pay-user ">
                    <div class="Pay-user-ChatHead">
                        <img src="../assets/img/pay/Pay-user.png" title="用户名">
                    </div>
                    <div class="Pay-user-name">
                        <h3>Zhenya Rynzhuk</h3>
                        <p>您当前的贡献值为：<span>6500</span></p>
                    </div>
                    <div class="Pay-user-Amount">
                        <p>钻石余额：<span>21钻石</span></p>
                    </div>
                </div>
                <!-- Pay-user end -->

                <!-- pay begin -->
                <div class="pay">
                    <div class="pay-option">
                        <ul>
                            <li><a>账户充值</a></li>
                            <li class="active"><a>钻石充值</a></li>
                        </ul>
                    </div>

                    <div class="pay-jewel">
                        <div class="pay-jewel-name">
                            充值余额：
                        </div>
                        <div class="pay-jewel-umb">
                            <a class="active">
                                <i class="pay-jewel-icon"></i><h2>100</h2>
                                <p>售价:10.00元</p>
                                <span>送5钻</span>
                            </a>

                            <a>
                                <i class="pay-jewel-icon"></i><h2>500</h2>
                                <p>售价:50.00元</p>
                                <span>送30钻</span>
                            </a>

                            <a>
                                <i class="pay-jewel-icon"></i><h2>1000</h2>
                                <p>售价:100.00元</p>
                                <span>送70钻</span>
                            </a>

                            <a>
                                <i class="pay-jewel-icon"></i><h2>3000</h2>
                                <p>售价:300.00元</p>
                                <span>送258钻</span>
                            </a>

                            <a>
                                <i class="pay-jewel-icon"></i><h2>5000</h2>
                                <p>售价:500.00元</p>
                                <span>送388钻</span>
                            </a>

                            <a>
                                <i class="pay-jewel-icon"></i><h2>8000</h2>
                                <p>售价:800.00元</p>
                                <span>送688钻</span>
                            </a>

                            <div class="pay-jewel-input">
                                <input type="text" placeholder="请钻石数量">
                                <!--  元-->
                            </div>
                            <p class="pay-jewel-reminder">
                                *兑换比例：1元=10钻石
                            </p>
                        </div>

                    </div>

                    <div class="Payment ">
                        <div class="Payment-name">
                            支付方式：
                        </div>
                        <div class="Payment-umb">
                            <a class="active Pay-zfb"><img src="../assets/img/pay/Pay-zfb.png"></a>
                            <a class="Pay-wx"><img src="../assets/img/pay/Pay-wx.png"></a>
                            <div class="pay-agreement">
                                我已阅读并同意<a>《关于用户充值的热别提示与约定》</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- pay end -->

                <div class="pay-bt-gr">
                    <a type="button">立即支付</a>
                </div>
            </div>
        </div>
        <!-- Recharge view end -->


        <!-- footer begin -->
        <footerCom></footerCom>
        <!-- footer end -->
    </div>
</template>
<script>
import HeaderNav from '@/components/headerCom'
import footerCom from '@/components/footerCom'
export default {
    data(){
        return{
            
        }
    },
    created(){       
               
    },
    methods:{
       
    },
    components: {
      HeaderNav,
      footerCom
    },
    mounted(){
        
    }
}
</script>

<style scoped>
@import "../assets/css/reset.css";
@import "../assets/css/layout.css";
@import "../assets/css/top2.css";
@import "../assets/css/footer.css";
@import "../assets/css/recharge.css";
</style>
